<template>
	<view class="my-order-container">
		<view class="header">
			<view class="header-left" @tap="goBack">
				<image src="../../static/public/left_arrow.png" mode="heightFix"></image>
			</view>
			<view class="header-title">待完成订单
				<image src="../../static/public/under_the.png" mode="aspectFit"></image>
			</view>
			<view class="header-right">订单统计</view>
		</view>
		<view class="body">
			<view class="item-card" v-for="(order, index) in receiverList" :key="order.id">
				<view class="item-header">
					<view class="content-time">
						<image mode="aspectFit" src="../../static/myorder/time.png"></image>
						{{calculationTime(order.cutoffTime)}}
					</view>
					<view class="item-price">￥{{ order.price }}</view>
				</view>
				<view class="item-content">
					<view class="item-title">{{ order.title }}</view>
					<view class="content-text">
						{{ shortContent(order.content) }}
					</view>
					<view class="contact">
						{{ processedName(order.name) }} 尾号
						<view class="phoneEnd">{{ shortPhone(order.phone) }}</view>
						<image src="../../static/myorder/contact.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="dashed"></view>
				<view class="button-box">
					<view class="icon-container" v-show="!order.showCancel">
						<view class="phone-icon" @click="contact(order.phone)">
							<image src="../../static/myorder/phone.png" mode="aspectFit"></image>
							联系
						</view>
						<view class="message-icon">
							<image src="../../static/myorder/message.png" mode="aspectFit"></image>
							聊天消息
						</view>
					</view>
					<view class="item-buttons">
						<view v-show="order.showCancel" @click="cancelOrder(order)" class="cancel-button">取消</view>
						<view :class="order.class" @click="clickArrive(order)">
							{{ order.text }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="publish-button">
			<view class="image">
				<image src="../../static/myorder/route.png"></image>
				<view>路线规划</view>
			</view>
			<button type="primary" @click="flushed()">刷新</button>
		</view>
	</view>
</template>

<script>
	import {
		rear
	} from '@/config/api.js';
	export default {
		data() {
			return {
				receiverList: [],
				clickLock: false
			};
		},
		onShow() {
			let user = uni.getStorageSync('user');
			if (!user) {
				return;
			} else {
				this.getReceiverList(user.id);
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			processedName(name) {
				const containsMr = name.endsWith('先生');
				const containsMs = name.endsWith('女士');
				if (containsMr || containsMs) {
					const surname = name[0];
					return surname + ''.repeat(name.length - 2) + name.slice(-2);
				} else {
					return name;
				}
			},
			flushed() {
				this.getReceiverList(uni.getStorageSync('user').id)
			},
			shortContent(shortContent) {
				return shortContent.slice(0, 27) + '...';
			},
			shortPhone(phone) {
				return phone.slice(7, 11);
			},
			contact(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: (res) => {
						console.log(res);
					},
				});
			},
			getReceiverList(id) {
				uni.request({
					url: rear + "/quest/getReceiverList", // API 地址
					method: 'GET', // 请求方法
					data: {
						userId: id,
						publishStatus: 0
					},
					success: (res) => {
						this.receiverList = res.data.data;
						this.receiverList.forEach(order => {
							order.showCancel = false;
							if (order.publishStatus === 2) {
								order.text = "确认完成";
								order.class = 'confirm-button';
							} else {
								order.text = '我已到达';
								order.class = 'arrive-button';
							}
						});
					}
				});
			},
			clickArrive(order) {
				if (this.clickLock) return;
				this.$forceUpdate();
				if (order.text === '我已到达') {
					order.showCancel = true;
					order.text = '确认到达';
					order.class = 'arrive-button click-arrive-button';
				} else if (order.text === '确认到达') {
					order.showCancel = false;
					order.text = '确认完成';
					this.clickLock = true;
					this.updateQuestStatus(order.id, 2);
					order.class = 'confirm-button';
				} else if (order.text === '确认完成') {
					if (order.showCancel) {
						this.clickLock = true;
						this.updateQuestStatus(order.id, 3);
						order.status = 3;
						this.receiverList = this.receiverList.filter(o => o.status !== 3);
						this.$forceUpdate();
					}
					order.showCancel = true;
					order.class = 'confirm-button click-confirm-button';

				}
			},
			updateQuestStatus(id, publishStatus) {
				uni.request({
					url: rear + "/quest/updateQuestStatus", // API 地址
					method: 'POST', // 请求方法
					data: {
						id: id,
						publishStatus: publishStatus
					},
					success: (res) => {
						console.log(res.data.data);
						this.clickLock = false;
					}
				});
			},
			calculationTime(time) {
				let currentTime = new Date(time).getTime() - new Date().getTime(); //当前时间
				let totalSeconds = Math.floor(currentTime / 1000);
				let days = Math.floor(totalSeconds / (3600 * 24));
				let hours = Math.floor((totalSeconds % (3600 * 24)) / 3600);
				let minutes = Math.floor((totalSeconds % 3600) / 60);
				let text = "";
				if (days != 0) {
					text = days + "天"
				}
				if (hours != 0) {
					text += hours + "小时"
				} else if (text != "") {
					text += "0小时"
				}
				if (minutes != 0) {
					text += minutes + "分钟";
				}
				return text + "内完成"
			},
			cancelOrder(order) {
				this.$forceUpdate();
				if (order.text === '确认到达') {
					order.showCancel = false;
					order.text = '我已到达';
					order.class = 'arrive-button';
				} else if (order.text === '确认完成') {
					order.showCancel = false;
					order.text = '确认完成';
					order.class = 'confirm-button';
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-order-container {
		width: 100vw;
		height: 100%;
		background-color: #FCFBFA;
	}


	.header {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		justify-content: space-between;
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 1.5vh;
		position: sticky;
		top: 0;
		padding-top: 4vh;
		z-index: 10000;

		.header-left {
			width: 21vw;

			image {
				height: 1.4vh;
				margin-left: 5vw;
			}
		}

		.header-right {
			margin-right: 3vw;
		}

		.header-title {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 4vw;
			font-weight: bold;

			image {
				width: 1vh;
				height: 1vh;
				margin-left: 1vw;
			}
		}
	}

	.body {
		width: 90vw;
		background-color: #FCFBFA;
		padding: 0 5vw;
		padding-bottom: 15vw;
	}

	.item-card {
		margin: 3vw 0;
		background-color: #fff;
		border-radius: 3vw;
		padding: 3vw;
		box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);

		.item-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 3vw;
		}

		.item-title {
			font-size: 5vw;
			font-weight: bold;
			color: #333;
			margin-bottom: 2vw;
		}

		.item-price {
			font-size: 4.5vw;
			font-weight: bold;
			color: #F20505;
		}

		.item-content {
			margin-top: 2vw;
			color: #666;
			font-size: 4vw;

			.contact {
				border: 0.2pt solid #666;
				padding: 1.5vw;
				width: 35vw;
				display: flex;
				color: #666;
				font-size: 3.8vw;
				border-radius: 0.5vw;
				justify-content: flex-start;
				align-items: center;
				flex-direction: row;

				image {
					width: 3.8vw;
					height: 3.8vw;
					padding-left: 0.5vw;
				}

				.phoneEnd {
					display: inline-block;
					font-weight: bolder;
					padding-left: 1vw;
					color: #666;
				}
			}

			.content-text {
				margin-bottom: 1vw;
				display: flex;
				align-items: flex-start;
				width: 80%;

				image {
					width: 5vw;
					height: 5vw;
					margin-right: 1vw;
					margin-top: 0.8vw;
				}
			}
		}

		.content-time {
			font-size: 4vw;
			font-weight: bold;
			color: black;
			display: flex;
			align-items: center;

			image {
				width: 4vw;
				height: 4vw;
				margin-right: 1vw;
			}
		}

		.dashed {
			margin-top: 3vw;
			border-bottom: 1px solid #eee;
		}

		.button-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
		}

		.item-buttons {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 3vw;

			.confirm-button,
			.cancel-button,
			.arrive-button {
				width: 58vw;
				height: 4vh;
				border-radius: 2vw;
				font-size: 3.5vw;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}

			.cancel-button {
				background-color: #FFFFFF;
				border: 1px solid #E3E2E2;
				color: #888A94;
				height: 4vh;
			}

			.cancel-button,
			.click-arrive-button,
			.click-confirm-button {
				width: 40vw;
				margin-right: 3vw;
			}


			.confirm-button {
				background: linear-gradient(#FE996E, #FF5721);
				color: #fff;
			}

			.arrive-button {
				background-color: #f9ae3d;
				color: #fff;
			}
		}

		.icon-container {
			display: flex;
			justify-content: space-between;
			margin-top: 3vw;
			margin-left: -3vw;

			.phone-icon,
			.message-icon {
				width: 12vw;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 3vw;
			}

			.phone-icon image,
			.message-icon image {
				width: 5vw;
				height: 5vw;
			}
		}
	}

	.publish-button {
		background-color: #ffffff;
		border-top: 1px solid #e5e5e5;
		position: fixed;
		bottom: 0;
		padding: 2vw 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100vw;

		.image {
			margin-left: 5vw;
			font-size: 3.4vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		image {
			width: 6vw;
			height: 6vw;
		}

		button {
			width: 70vw;
			height: 5vh;
			background: linear-gradient(#FE996E, #FF5721);
		}
	}
</style>